<template>
  <div class="device-location h-100P flex-column">
    <div class="justify-end">
      <div class="flex align-center mg-right-10" v-if="position || isEditing">
        <div class="text-nowrap mg-right-6">坐标:</div>
        <el-input :value="position?position.join(','):''" disabled></el-input>
      </div>
      <CustomButton
        v-show="!isEditing"
        @click="handleEditDeviceLocation"
        title="设定位置"
      ></CustomButton>
      <CustomButton
        v-show="isEditing"
        @click="handleConfirmDeviceLocation"
        title="确定修改"
      ></CustomButton>
    </div>
    <div class="flex-sub mg-top-20">
      <amap :zoom.sync="map.zoom" :center="map.center" @click="handleMapClick">
        <amap-marker
          :position="[116.473179, 39.993169]"
          :label="{ content: 'Hello, AMap-Vue!', direction: 'bottom' }"
        />
        <amap-marker
          v-if="position || isEditing"
          :position.sync="position"
          :draggable="isEditing"
        />
      </amap>
    </div>
  </div>
</template>

<script>
import CustomButton from '@/components/custom-button'
import Amap from '@amap/amap-vue/lib/amap'
import AmapMarker from '@amap/amap-vue/lib/marker'
import { loadAmap, loadPlugins } from '@amap/amap-vue'
import { apiSetDeviceLocation } from '@/views/device/deploy-device/api'

export default {
  name: 'DeviceLocation',
  components: { CustomButton, Amap, AmapMarker },
  props: {
    device: {
      type: Object,
      required: true,
      default: () => ({}),
    },
  },

  data() {
    return {
      isEditing: false,
      position: null,
      map: {
        zoom: 20,
        center: [113.524857, 22.386236],
      },
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.initMap()
      this.initData()
    },
    async initMap() {
      await loadAmap()
      // 插件
      await loadPlugins(['AutoComplete', 'MoveAnimation'])
    },
    async initData() {
      const { latitude, longitude } = this.device.locationVo
      if (latitude && longitude) {
        this.position = [longitude, latitude]
      }
    },
    /**
     * 获取鼠标点击地图的经纬度
     * @param e
     */
    handleMapClick(e) {
      const { lnglat } = e
      if (lnglat && this.isEditing) {
        //[经度, 维度]
        this.position = [lnglat.lng, lnglat.lat]
      }
    },
    handleEditDeviceLocation() {
      this.isEditing = true
    },
    handleConfirmDeviceLocation() {
      if (!(this.position && this.position.length)) {
        return this.$message.error('请点击地图拾取坐标!')
      }
      apiSetDeviceLocation({
        businessKey: this.device.id,
        latitude: this.position[1],
        longitude: this.position[0],
      }).then(() => {
        this.isEditing = false
        this.$message.success('设备位置设定成功')
      })
    },
  },
}
</script>

<style scoped lang="scss">
.device-location {
  .amap-wrapper {
    width: 100%;
    height: 100%;
  }
}
</style>
